<template>
  <div class="local-spending-page">
    <!-- 顶部信息卡片 -->
    <div class="info-card">
      <div class="info-content">
        <!-- 左侧图片 -->
        <div class="info-image">
          <img src="/banner2.jpg" alt="地区消费分析" />
        </div>
        <!-- 右侧文字 -->
        <div class="info-text">
          <h2>
        📊 各地区平均消费能力分析
          </h2>
        <p class="desc">
        在电商平台的用户群体中，不同地区消费者的平均消费能力存在较为明显的差异。
        一线城市如北京、上海、广州、深圳，用户整体购买力较强，消费金额普遍高于其他地区，尤其在高端手机、智能家电和电脑类产品的购买上表现突出；
        二线及新一线城市用户则在追求性价比的同时，也逐渐展现出对品牌与品质的重视，消费结构趋于多元化；
        三四线城市和部分下沉市场的用户虽然整体消费金额相对较低，但用户基数庞大，增长潜力显著。
        <br /><br />
        本分析基于电商交易数据，展示各地区用户的平均消费金额对比情况。
        从结果来看，沿海和经济发达地区的消费者更倾向于购买高价位的电子产品，而中西部及部分下沉市场则更注重实用性和价格优势。
        <br /><br />
        这种区域间的差异不仅反映了经济水平和消费观念的不同，也为电商平台制定区域化运营策略、电子产品厂商规划市场投放提供了有价值的参考。
        企业可以根据各地区消费能力的特点，灵活调整产品定价、营销策略与渠道布局，从而更有效地覆盖目标用户群体。
        </p>
        </div>
      </div>
    </div>

    <!-- 图表卡片 -->
    <div class="chart-card">
      <div class="chart-container" ref="chartRef"></div>
      <p class="note">提示：数值表示平均消费金额（单位：元）</p>
    </div>

    <!-- 下载按钮 -->
    <div class="download-wrapper">
      <button class="download-btn" @click="downloadChart">下载图表文件</button>
    </div>

    <!-- 页面底部 Footer -->
    <FooterInfo />
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts'
import FooterInfo from '../components/FooterInfo.vue'

// 中文城市名
const cities = ['广东', '上海', '四川', '天津', '北京', '江苏','浙江','海南','湖北','湖南','重庆']
const stats = ref([])
const chartRef = ref(null)
let chartInstance = null
const API_BASE = 'http://localhost:8080/queryAvgConsumptionOfLocation'


async function fetchCityData(city) {
  try {
    const res = await fetch(`${API_BASE}?location=${encodeURIComponent(city)}`)
    if (!res.ok) throw new Error(`HTTP error ${res.status}`)

    const result = await res.json()
    if (result.code === 200 && result.data) {
      return {
        location: result.data.location,
        avgConsumption: result.data.avgConsumption
      }
    } else {
      console.error(`后端返回异常:`, result)
      return null
    }
  } catch (err) {
    console.error(`获取 ${city} 数据失败:`, err)
    return null
  }
}

// 拉取所有城市数据
async function fetchAllData() {
  const results = await Promise.all(cities.map(city => fetchCityData(city)))
  stats.value = results.filter(Boolean) // 过滤掉失败的
  updateChart()
}

function updateChart() {
  if (!chartInstance || stats.value.length === 0) return

  const option = {
    tooltip: { trigger: 'axis' },
    xAxis: {
      type: 'category',
      data: stats.value.map(s => s.location)
    },
    yAxis: {
      type: 'value',
      name: '平均消费金额 (元)'
    },
    series: [
      {
        name: '平均消费金额',
        type: 'bar',
        data: stats.value.map(s => s.avgConsumption),
        itemStyle: { color: '#4a90e2' }
      }
    ]
  }
  chartInstance.setOption(option)
}

onMounted(async () => {
  await nextTick()
  if (!chartRef.value) return
  chartInstance = echarts.init(chartRef.value)
  await fetchAllData()

  window.addEventListener('resize', () => {
    chartInstance && chartInstance.resize()
  })
})
</script>

<style scoped>
.local-spending-page {
  max-width: 1000px;
  margin: 40px auto;
  font-family: 'Segoe UI', sans-serif;
}

/* 顶部信息卡片 */
.info-card {
  background: #fff;
  padding: 25px 30px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  margin-bottom: 25px;
}

.info-content {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.info-image img {
  width: 240px;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  margin-top: 70px;
}

.info-text {
  flex: 1;
}

.info-text h2 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 12px;
  color: #333;
}

.info-text .desc {
  font-size: 15px;
  color: #555;
  line-height: 1.8;
  text-align: justify;
}

/* 图表卡片 */
.chart-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  padding: 20px;
  margin-bottom: 20px;
}

.chart-container {
  width: 100%;
  height: 400px;
}

.note {
  text-align: center;
  font-size: 13px;
  color: #888;
  margin-top: 10px;
}

/* 下载按钮 */
.download-wrapper {
  text-align: center;
  margin-bottom: 30px;
}

.download-btn {
  background: #ff7f50;
  color: #fff;
  padding: 10px 22px;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.3s;
}

.download-btn:hover {
  background: #ff6333;
}
</style>
